<template>
	<view class="order-list" :class="themeName">

		<view class="box-main m-20 p-20 bg-white">
			<view class="flex row-between u-border-bottom p-b-20">
				<view>{{$zhTran('工单编号：')}}{{dataInfo.sn}}</view>
				<view class="badge m-l-20" :class="[statusDesc[dataInfo.status]]">
					{{dataInfo.status_desc}}
				</view>
			</view>
			<view class="flex m-t-20 m-b-20">
				<view>{{dataInfo.user_nickname}}</view>
				<view class="m-l-10 m-r-10">{{dataInfo.user_mobile}}</view>
				<view style="color: rgba(64, 115, 250, 1);" @click.native.stop="callPhone($event,dataInfo.user_mobile)">
					{{$zhTran('拨打')}}
				</view>
			</view>
			<view class="flex m-t-20 m-b-20 desc">{{dataInfo.order_goods[0].goods_name}}</view>
			<view class="flex m-t-20 row-between ">
				<view class="desc">{{dataInfo.order_goods[0].delivery_address}}</view>
				<view class="desc" style="color: rgba(64, 115, 250, 1);" @click="toLocation">{{$zhTran('定位')}}</view>
			</view>
		</view>
		<!-- Tabs -->
		<u-tabs :list="tabsList" :is-scroll="false" :height="80" active-color="rgba(64, 115, 250, 1)"
			:bar-style="{ top: '100%' }" :current="tabsIndex" @change="changeCurrentTab" />

		<!-- Order Lists -->
		<view class="p-20" v-if="currentTabSign == 'order'">
			<view class="p-20 bg-white">
				<view class="p-b-20 flex row-between u-border-bottom">
					<view>{{$zhTran('工单编号')}}</view>
					<view>{{dataInfo.sn}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('工单类型')}}</view>
					<view>{{dataInfo.type_desc}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('工单状态')}}</view>
					<view>{{dataInfo.status_desc}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('客户姓名')}}</view>
					<view>{{dataInfo.user_nickname}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('客户电话')}}</view>
					<view>{{dataInfo.user_mobile}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('服务人员')}}</view>
					<view>{{dataInfo.accendant.user_nickname}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('工单来源')}}</view>
					<view>{{dataInfo.source_desc}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('创建人员')}}</view>
					<view>{{dataInfo.admin_desc}}</view>
				</view>
				<view class="p-t-20 flex row-between">
					<view>{{$zhTran('创建时间')}}</view>
					<view>{{dataInfo.create_time}}</view>
				</view>
			</view>
		</view>
		<view class="p-20" v-if="currentTabSign == 'goods'">
			<view class="p-20 bg-white m-b-20" v-for="item,idx in dataInfo.order_goods" :key="idx">
				<view class="p-b-20 flex row-between u-border-bottom">
					<view>{{$zhTran('产品编码')}}</view>
					<view>{{item.goods_code}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('产品图片')}}</view>
					<view @click="showImage(item.goods_image)">
						<u-image width="100rpx" height="100rpx" :src="item.goods_image"></u-image>
					</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('产品名称')}}</view>
					<view>{{item.goods_name}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('产品规格')}}</view>
					<view>{{item.spec_value_str}}</view>
				</view>
				<view class="p-t-20 flex row-between ">
					<view>{{$zhTran('购买时间')}}</view>
					<view>{{item.create_time}}</view>
				</view>
			</view>
		</view>
		<view class="p-20" v-if="currentTabSign == 'work'">
			<view class="p-20 bg-white m-b-20">
				<u-time-line>
					<u-time-line-item v-for="(item, idx) in dataInfo.event" :key="idx">
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{item.entry_staff}}</view>
								<view class="u-order-desc">
									<view v-for="arr,idx2 in item.content_arr" :key="idx2">{{arr}}</view>
								</view>
								<view class="u-order-time">{{item.create_time}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
			<u-gap height="160"></u-gap>
		</view>
		<view class="p-20" v-if="currentTabSign == 'amount'">
			<view class="p-20 bg-white m-b-20">
				<view class="p-b-20 flex row-between u-border-bottom">
					<view>{{$zhTran('工单费用')}}</view>
					<view>￥{{dataInfo.amount}}</view>
				</view>
				<view class="p-b-20 p-t-20 flex row-between u-border-bottom">
					<view>{{$zhTran('附件费用')}}</view>
					<view>￥{{dataInfo.other_amount}}</view>
				</view>
				<view class="p-t-20 flex row-between ">
					<view>{{$zhTran('费用总和')}}</view>
					<view>￥{{dataInfo.total_amount}}</view>
				</view>
			</view>
		</view>
		<view class="p-20" v-if="currentTabSign == 'profit'">
			<view class="p-20 bg-white m-b-20">
				<view class="p-b-20 flex row-between u-border-bottom">
					<view>{{$zhTran('结算状态')}}</view>
					<view>{{dataInfo.settlement_status_desc}}</view>
				</view>
				<view class="p-t-20 flex row-between ">
					<view>{{$zhTran('结算费用')}}</view>
					<view>￥{{dataInfo.total_amount}}</view>
				</view>
			</view>
		</view>

		<view class="functions flex row-between" v-if="dataInfo.status != 4">
			<view class="btn flex row-center cancel" @click="cancelOrder">{{$zhTran('取消工单')}}</view>
			<view class="btn flex row-center work" @click="showWork=true" :class="[{disabled:dataInfo.status == 3}]">
				{{$zhTran('添加进展')}}
			</view>
		</view>

		<u-popup v-model="showWork" :closeable="true" :maskCloseAble="false" mode="center" border-radius="14">
			<view class="bg-white popup-box" style="width: 80vw;">
				<view class="p-24 xl">{{$zhTran('录入内容')}}</view>
				<view class="p-24">
					<u-input class="nr" v-model="event.content" :placeholder="$zhTran('请填写内容')" :border="true"
						:height="80" type="textarea">
					</u-input>
				</view>
				<view class="p-24 xl">{{$zhTran('录入照片')}}</view>
				<view class="p-24">
					<uploader v-model="event.adj" mutiple :deletable="true" preview-size="160rpx" :maxUpload="5"
						image-fit="aspectFill" :is-temp="true" />
				</view>
				<view class="flex btn-item">
					<button class="btn confirm" form-type="submit" @click="saveWork">{{$zhTran('确定')}}</button>
					<button class="btn" style="width: 50%;" @click="showWork=false">{{$zhTran('取消')}}</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>


<script>
	import QQMapWX from '@/plugin/qqmap-wx-jssdk.min.js'
	import {
		location_key
	} from "@/config/app";
	import {
		apiServiceWorkOrderOrderDetail,
		apiServiceWorkOrderCancelOrder,
		apiAddServiceWorkOrderEvent
	} from "@/api/service_work_order"
	export default {
		data() {
			return {
				current: 1,
				// Tabs列表
				tabsList: [{
					sign: 'order',
					name: this.$zhTran('工单'),
				}, {
					sign: 'goods',
					name: this.$zhTran('产品'),
				}, {
					sign: 'work',
					name: this.$zhTran('进展'),
				}, {
					sign: 'amount',
					name: this.$zhTran('费用'),
				}, {
					sign: 'profit',
					name: this.$zhTran('结算'),
				}],
				tabsIndex: 0, // Tabs索引
				swo_id: '',
				statusDesc: ['new', 'work', 'check', 'done', 'cancel'],
				dataInfo: {},
				showWork: false,
				event: {
					content: '',
					adj: []
				}
			}
		},
		onShow() {
			const options = this.$Route.query
			this.swo_id = parseInt(options?.id)

			if (!this.swo_id) {
				this.$toast({
					title: this.$zhTran('获取工单内容失败'),
					endtime: 1500
				}, {
					tab: 5,
					url: '/bundle3/pages/service_work_order/accendant/list'
				});
				return
			}
			this.getOrderDetail()
		},
		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}

			this.qqmapsdk = new QQMapWX({
				key: location_key
			});
		},

		computed: {
			// 当前Tab项
			currentTabSign() {
				return this.tabsList[this.tabsIndex].sign || {}
			},
		},
		methods: {
			// 更改当前Tab页
			changeCurrentTab(index) {
				this.tabsIndex = index
			},

			// 上拉加载更多
			getOrderDetail() {
				apiServiceWorkOrderOrderDetail({
						id: this.swo_id
					})
					.then((res) => {
						this.dataInfo = this.$zhTran(res)
					})
					.catch(err => {
						console.log(err)
					})
			},
			callPhone(e, phone) {
				e.preventDefault(); // 阻止事件冒泡穿透
				wx.makePhoneCall({
					phoneNumber: phone
				})
			},
			toLocation() {
				var that = this;
				let address = this.dataInfo.order_goods[0].delivery_address
				this.qqmapsdk.geocoder({
					address: address,
					success(res) {
						if (res.message == 'query ok') {
							let latitude = res.result.location.lat
							let longitude = res.result.location.lng

							uni.openLocation({
								latitude,
								longitude,
								scale: 18,
								address: that.$zhTran(address),
							})
						}
					},
					fail: function(res) {
						console.log(res);
					}
				})
			},
			showImage(img) {
				uni.previewImage({
					urls: [img],
				});
			},
			cancelOrder() {
				var that = this
				uni.showModal({
					content: this.$zhTran('确定取消此工单？'),
					confirmColor: this.themeColor,
					confirmText: this.$zhTran('确定'),
					success(res) {
						console.log(res)
						if (res.confirm) {
							apiServiceWorkOrderCancelOrder({
								id: that.swo_id,
								accendant_user: that.userInfo.id,
							}).then((res) => {
								that.getOrderDetail()
							}).catch(err => {})
						}
					}
				})
			},
			saveWork() {
				if (this.dataInfo.status == 3) return

				if (this.event.content == '') {
					return this.$toast({
						title: '请填写内容'
					})
				}

				apiAddServiceWorkOrderEvent({
					id: this.swo_id,
					accendant_user: this.userInfo.id,
					...this.event
				}).then(res => {
					this.$Router.replace({
						path: `/bundle3/pages/service_work_order/accendant/detail`,
						query: {
							id: this.swo_id
						}
					})
				})
			}
		},

		onUnload() {},
	}
</script>


<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}

	.order-list {
		height: 100%;

		.order-item {
			flex: 1;
			min-height: 0;

			.order-item-box {
				height: calc(100% - 80rpx - constant(safe-area-inset-bottom));
				height: calc(100% - 80rpx - env(safe-area-inset-bottom));
			}
		}
	}

	.order-contain {
		padding: 0 20rpx;
	}

	.order {
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 5px;
		background-color: #FFFFFF;

	}

	.box-main {

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: rgba(22, 22, 22, 1);
		}

		.badge {
			padding: 10rpx 20rpx;
			border-radius: 6rpx;
			margin-right: 10rpx;
			font-size: 24rpx;

			&.new {
				background-color: rgba(64, 115, 250, 1);
				color: #fff;
			}

			&.work {
				background-color: rgba(255, 141, 26, 1);
				color: #fff;
			}

			&.check {
				background-color: rgba(245, 114, 108, 1);
				color: #fff;
			}

			&.done {
				background-color: rgba(103, 194, 69, 1);
				color: #fff;
			}

			&.cancel {
				background-color: rgba(153, 153, 153, 1);
				color: #fff;
			}
		}

		.desc {
			color: rgba(128, 128, 128, 1);
			font-size: 24rpx;
		}

	}

	.functions {
		position: fixed;
		z-index: 9999;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(248, 248, 250, 1);
		height: calc(110rpx + constant(safe-area-inset-bottom));
		height: calc(110rpx + env(safe-area-inset-bottom));
		padding: 10rpx 36rpx constant(safe-area-inset-bottom) 36rpx;
		padding: 10rpx 36rpx env(safe-area-inset-bottom) 36rpx;

		.btn {
			width: 45%;
			border-radius: 50rpx;
			height: 80rpx;

			&.cancel {
				background-color: #fff;
				color: rgba(104, 104, 104, 1);
			}

			&.work {
				color: #fff;
				background-color: rgba(64, 115, 250, 1);
			}

			&.profit {
				color: #fff;
				background-color: rgba(253, 118, 3, 1);
			}

			&.disabled {
				color: rgba(159, 159, 159, 1);
				background-color: rgba(223, 223, 223, 1);
			}
		}
	}

	.popup-box {

		.btn-item {
			height: 80rpx;
			background-color: rgba(244, 246, 249, 1);

			.btn {
				color: rgba(38, 38, 38, 1);
				padding: 6rpx 0 !important;
				border-radius: 0 !important;
			}

			.confirm {
				width: 50%;
				color: rgba(64, 115, 250, 1);
			}
		}
	}
</style>